<template>
  <div class="editor-main canvas-field">
    <a-typography>
      <a-typography-title :level="3">屏幕设置</a-typography-title>
      <div class="canvas-main overflow-auto">
        <a-form
          :labelCol="{ span: 7 }"
          labelAlign="left"
          :model="config.canvasConfig"
        >
          <a-form-item label="屏幕名称">
            <a-input v-model:value="config.canvasConfig.name"></a-input>
          </a-form-item>
          <a-form-item label="屏幕描述">
            <a-input v-model:value="config.canvasConfig.desc"></a-input>
          </a-form-item>
          <a-form-item label="屏幕宽度">
            <a-input-number
              style="width: 100%"
              v-model:value="config.canvasConfig.width"
            />
          </a-form-item>
          <a-form-item label="屏幕宽度">
            <a-slider
              v-model:value="config.canvasConfig.scale"
              :min="0.1"
              :step="0.1"
              :max="1"
            />
          </a-form-item>
          <a-form-item label="屏幕高度">
            <a-input-number
              style="width: 100%"
              v-model:value="config.canvasConfig.height"
            />
          </a-form-item>
          <a-form-item label="屏幕背景颜色">
            <a-input-group compact>
              <a-input
                v-model:value="config.canvasConfig.backgroundColor"
                style="width: calc(100% - 32px); text-align: left"
                allow-clear
              />
              <ColorPicker v-model:value="config.canvasConfig.backgroundColor">
                <BgColorsOutlined />
              </ColorPicker>
            </a-input-group>
          </a-form-item>
          <a-form-item label="屏幕背景图片">
            <a-input-group compact>
              <a-input
                v-model:value="config.canvasConfig.backgroundImage"
                style="width: calc(100% - 32px); text-align: left"
                allow-clear
              />
              <ImageList></ImageList>
            </a-input-group>
          </a-form-item>
          <a-form-item label="全局请求路径">
            <a-input v-model:value="config.canvasConfig.requestPrefix" />
          </a-form-item>
          <a-form-item label="图片请求路径">
            <a-input v-model:value="config.canvasConfig.imagePrefix" />
          </a-form-item>
          <a-form-item label="是否响应">
            <div class="w-full flex justify-start">
              <a-switch v-model:checked="config.canvasConfig.adapt" />
            </div>
          </a-form-item>
          <a-form-item label="全局变量">
            <div class="flex justify-flex-end mb-6">
              <a-button type="link" @click="addGlobalVar">
                <template #icon>
                  <PlusSquareFilled />
                </template>
              </a-button>
            </div>
          </a-form-item>
          <div
            v-for="(item, index) in config.canvasConfig.globalVar"
            :key="index"
            class="var-group mb-6"
          >
            <div class="flex justify-flex-end mb-6">
              <a-button type="link" danger @click="delGlobalVar(index)">
                <template #icon>
                  <DeleteFilled />
                </template>
              </a-button>
            </div>
            <a-form-item label="变量名称">
              <a-input v-model:value="item.name"></a-input>
            </a-form-item>
            <a-form-item label="数据类型">
              <a-select v-model:value="item.type">
                <a-select-option value="String">string</a-select-option>
                <a-select-option value="Number">number</a-select-option>
                <a-select-option value="Boolean">boolean</a-select-option>
                <a-select-option value="Array">array</a-select-option>
                <a-select-option value="Object">object</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="数据值">
              <a-input v-model:value="item.value"></a-input>
            </a-form-item>
          </div>
          <div class="pt-6" v-show="config.canvasConfig.globalVar.length">
            <a-button type="primary" block @click="reload">加载数据</a-button>
          </div>
        </a-form>
      </div>
    </a-typography>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useConfig } from "@/stores/datav/useConfig";
import {
  BgColorsOutlined,
  PlusSquareFilled,
  DeleteFilled,
} from "@ant-design/icons-vue";
import { IConfigStore } from "@/stores/datav/types";
import ColorPicker from "../ColorPicker/index.vue";
import ImageList from "../ImageList/index.vue";
export default defineComponent({
  components: {
    BgColorsOutlined,
    PlusSquareFilled,
    DeleteFilled,
    ColorPicker,
    ImageList,
  },
  setup() {
    const config: IConfigStore = useConfig();
    const addGlobalVar = () => {
      config.canvasConfig.globalVar.push({
        name: "",
        type: "String",
        value: "",
      });
    };
    const delGlobalVar = (index: number) => {
      config.canvasConfig.globalVar.splice(index, 1);
    };

    const reload = () => {
      config.canvasConfig.globalVar.forEach((item) => {
        if (item.name) {
          switch (item.type) {
            case "String":
              try {
                // @ts-ignore
                window[item.name] = new String(item.value).valueOf();
              } catch (e) {
                console.log(e, "加载数据");
              }
              break;
            case "Number":
              try {
                // @ts-ignore
                window[item.name] = new Number(item.value).valueOf();
              } catch (e) {
                console.log(e, "加载数据");
              }
              break;
            case "Boolean":
              try {
                // @ts-ignore
                window[item.name] = new Boolean(item.value).valueOf();
              } catch (e) {
                console.log(e, "加载数据");
              }
              break;
            case "Array":
              try {
                // @ts-ignore
                window[item.name] = JSON.parse(item.value);
              } catch (e) {
                console.log(e, "加载数据");
              }

              break;
            case "Object":
              try {
                // @ts-ignore
                window[item.name] = JSON.parse(item.value);
              } catch (e) {
                console.log(e, "加载数据");
              }
              break;
            default:
              // @ts-ignore
              window[item.name] = item.value;
          }
        }
      });
    };
    return {
      config,
      addGlobalVar,
      delGlobalVar,
      reload,
    };
  },
});
</script>

<style lang="less" scoped>
.canvas-field {
  /deep/ .ant-typography {
    text-align: center;
    color: @white;
  }

  /deep/ .ant-form-item-label label {
    color: @white;
  }
}

.canvas-main {
  height: calc(100vh - 84px);
  padding: 6px;
}

.var-group {
  padding: 6px;
  box-shadow: 0 5px 10px fade(@primary-color, 40%);
}
</style>
